<template>
  <el-dialog :title="title" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => $emit('close')">
    <el-card v-loading="isLoading">
      <el-form label-width="105px" :model="formData" ref="formData" :rules="rules">
        <el-form-item label="选择角色:" prop="roleId" id="roleId">
          <el-select v-model="formData.roleId" filterable clearable @change="roleChange" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择人员:">
          <el-select v-model="formData.userId" filterable clearable :disabled="!formData.roleId" placeholder="请先选择角色">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveFormData">委派</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import NeedToTaskApi from '@/api/taskManage/NeedToTaskApi'
  export default {
    name: 'delegate',
    props:{
      width:{
        type:String,
        default:'60vw'
      },
      flowData:{
        type:Object,
      },
    },
    data(){
      return{
        title:'委派',
        isShowVisible:true,
        isLoading:false,
        rules:{
          roleId: [{required: true, message: '请选择角色', tirgger: 'change'}],
        },
        formData:{
          roleId:'',
          userId:'',
        },
        roleList:[],
        userList:[],
      }
    },
    created(){
      let http = new NeedToTaskApi()
      http.roleList({}).then(res => {
        this.roleList = res.data
      })
    },
    methods:{
      roleChange(roleId){
        this.formData.userId = ''
        const loading = this.$loading({
          lock: true,
          text: '获取人员数据中，请耐心等待.....',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let http = new NeedToTaskApi()
        http.userListByRoleId({roleId, pageSize:9999}).then(res => {
          let obj = {}
          this.userList =  res.data.records.reduce((prev, curr)=>{
            obj[curr.name] ? true : obj[curr.name] = true && prev.push(curr);
            return prev
          }, [])
          // this.userList = res.data.records
          loading.close()
        }).catch(e => {
          loading.close()
        })
      },
      saveFormData(){
        this.$refs['formData'].validate((valid, object) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '请耐心等待.....',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let http = new NeedToTaskApi()
            let data = {
              assigneeOrCandidateUserId: this.formData.userId ? this.formData.userId : this.formData.roleId,
              applyUserId: this.flowData.applyUserId,
              processInstanceId: this.flowData.processInstanceId,
              processName: this.flowData.processName,
            }
            http.entrust(data).then(res => {
              loading.close()
              if(res.code === 200){
                this.$message.success('委派成功!')
                this.$emit('close')
              }else{
                this.$message.error('委派失败!')
              }
            }).catch(e => {
              loading.close()
            })
          } else {
            let validArr = []
            Object.keys(object).forEach(function (key) {
              validArr.push(key)
            });
            let validVal = "#" + validArr[0];
            document.querySelector(validVal).scrollIntoView(true);
          }
        })
      },
    },
  }
</script>

<style scoped>

</style>
